<script src="http://www.simile-widgets.org/timeline/api/timeline-api.js?bundle=true" type="text/javascript"></script>  
<link rel='stylesheet' href='http://www.simile-widgets.org/timeline/examples/styles.css' type='text/css' />

<script>
        var tl;
        function onLoad() {
          
          ProColor.prototype.attachButton('id_color', { imgPath:'../../images/img/procolor_win_', showInField: true });
          ProColor.prototype.attachButton('id_textcolor', { imgPath:'../../images/img/procolor_win_', showInField: true });



            var eventSource = new Timeline.DefaultEventSource(0);

            // Example of changing the theme from the defaults
            // The default theme is defined in
            // http://simile-widgets.googlecode.com/svn/timeline/tags/latest/src/webapp/api/scripts/themes.js
            var theme = Timeline.ClassicTheme.create();
            theme.event.bubble.width = 350;
            theme.event.bubble.height = 300;

            var d = Timeline.DateTime.parseGregorianDateTime("1900")
            var bandInfos = [
                Timeline.createBandInfo({
                    width:          "80%",
                    intervalUnit:   Timeline.DateTime.DECADE,
                    intervalPixels: 200,
                    eventSource:    eventSource,
                    date:           d,
                    theme:          theme,
                    layout:         'original'  // original, overview, detailed
                }),
                Timeline.createBandInfo({
                    width:          "20%",
                    intervalUnit:   Timeline.DateTime.CENTURY,
                    intervalPixels: 200,
                    eventSource:    eventSource,
                    date:           d,
                    theme:          theme,
                    layout:         'overview'  // original, overview, detailed
                })
            ];
            bandInfos[1].syncWith = 0;
            bandInfos[1].highlight = true;

            tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
            // Adding the date to the url stops browser caching of data during testing or if
            // the data source is a dynamic query...
            tl.loadXML("/memorylanes/1/timeline_events/events_list", function(xml, url) {
                eventSource.loadJSON(xml, url);
            });


        }
        var resizeTimerID = null;
        function onResize() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    tl.layout();
                }, 500);
            }
        }


    </script>

